<template>
    <el-dialog :visible.sync="isShow" :title="headerTitle" class="dialog-sqe" @close="handleClose" center top="14vh" width="80%" height="500px" append-to-body :fullscreen="fullscreen">
        <el-form size="small" label-suffix=":" :inline="true" :show-message="false" class="base-info" label-width="100px">
            <el-row>
                <el-col :span="6" v-if="dialogForm.status > 2">
                    <el-form-item label="整改报告编号">{{dialogForm.problemNum}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="缺陷类型">{{dialogForm.detail.flaw}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="工厂">{{dialogForm.row.factoryName}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="供应商编码">{{dialogForm.row.supplierCode}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="MRB创建人">{{dialogForm.row.createBy}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="整改单发布人">{{dialogForm.status > 2 ? dialogForm.updateBy : name}}</el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item :label="$t('inventoryManagement.inventoryManagement')">{{dialogForm.row.materialCode}}</el-form-item>
                </el-col>
                <!-- <el-col :span="6"> <el-form-item label="物料等级">{{dialogForm.materialGradeName}}</el-form-item></el-col>
        <el-col :span="6"><el-form-item label="物料大类">{{dialogForm.detail.materialMax}}</el-form-item></el-col>
        <el-col :span="6"><el-form-item label="物料中类">{{dialogForm.detail.materialMiddle}}</el-form-item></el-col>
        <el-col :span="6"><el-form-item label="物料小类">{{dialogForm.detail.materialType}}</el-form-item></el-col> -->
                <el-col :span="6">
                    <el-form-item :label="$t('material.materialName')">{{dialogForm.row.materialName}}</el-form-item>
                </el-col>
                <!-- <el-col :span="6"><el-form-item label="物料成熟度">{{dialogForm.row.maturity}}</el-form-item></el-col> -->
            </el-row>
        </el-form>
        <el-form :model="dialogForm" size="small" label-suffix=":" :disabled="dialogForm.status > 2" ref="detailForm" :rules="rules" label-width="110px">
            <el-row>
                <!--                <el-col :span="8">-->
                <!--                    <el-form-item label="报告类型" prop="reportType">-->
                <!--                        <el-select v-model="dialogForm.reportType" :placeholder="$t('public.selectPl')" clearable style="width:100%;" size="small" @change="handleReportChange">-->
                <!--                            <el-option v-for="dict in types" :key="dict.value" :label="dict.label" :value="dict.value" />-->
                <!--                        </el-select>-->
                <!--                    </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                    <el-form-item label="事故类型" prop="accidentType">
                        <el-select v-model="dialogForm.accidentType" :placeholder="$t('public.selectPl')" clearable style="width:100%;" size="small" @change="handleLevelChange">
                            <el-option v-for="dict in dict.type.NYIQC_RECTIFICATION_ACCIDENTTYPE" :key="dict.label" :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="业务实体" prop="orgCode">
                        <el-select v-model="dialogForm.orgCode" :placeholder="$t('public.selectPl')" clearable style="width:100%;" size="small" @change="handleLevelChange">
                            <el-option v-for="dict in dict.type.NYIQC_RECTIFICATION_ORGCODE" :key="dict.label" :label="dict.label" :value="dict.value" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="整改报告标题" prop="problemTitle">
                        <el-input v-model="dialogForm.problemTitle" :placeholder="$t('public.inputPl')" />
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="围堵措施" prop="icaDemandDate">
                        <el-date-picker v-model="dialogForm.icaDemandDate" value-format="yyyy-MM-dd" :placeholder="$t('public.selectPl')">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="改善措施" prop="pcaDemandDate">
                        <el-date-picker style="width:100%" v-model="dialogForm.pcaDemandDate" value-format="yyyy-MM-dd" type="date" :placeholder="$t('public.selectPl')">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="关闭时间" prop="problemCloseDate">
                        <el-date-picker style="width:100%" v-model="dialogForm.problemCloseDate" value-format="yyyy-MM-dd" type="date" :placeholder="$t('public.selectPl')">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item :label="(dialogForm.level=='1'&&dialogForm.reportType=='1')?'问题关闭': (((dialogForm.level=='2'||dialogForm.level=='3')&&dialogForm.reportType=='2')?'7D':'关闭时间')" prop="problemCloseDate">
                        <el-date-picker style="width:100%" v-model="dialogForm.problemCloseDate" value-format="yyyy-MM-dd" type="date" :placeholder="$t('public.selectPl')">
                        </el-date-picker>
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-row>

                <el-col :span="24">
                    <el-form-item label="what" prop="defectWhat">
                        <el-input v-model="dialogForm.defectWhat" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="when" prop="defectWhen">
                        <el-date-picker type="datetime" v-model="dialogForm.defectWhen" value-format="yyyy-MM-dd HH:mm:ss" :placeholder="$t('public.selectPl')">
                        </el-date-picker>
                        <!--            <el-input v-model="dialogForm.defectWhen"    type="textarea"  maxlength="1000" :placeholder="$t('public.inputPl')" clearable />-->
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="who" prop="defectWho">
                        <el-input v-model="dialogForm.defectWho" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="where" prop="defectWhere">
                        <el-input v-model="dialogForm.defectWhere" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="why" prop="defectWhy">
                        <el-input v-model="dialogForm.defectWhy" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="how" prop="defectHow">
                        <el-input v-model="dialogForm.defectHow" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="how many" prop="defectHowMany">
                        <el-input v-model="dialogForm.defectHowMany" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注">
                        <el-input v-model="dialogForm.ps" type="textarea" maxlength="1000" :placeholder="$t('public.inputPl')" clearable />
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                    <el-form-item label="采购方附件" prop="attachment">
                        <file-upload @change="fileChange($event,'attachment')" :disabled="dialogForm.status > 2" :limit="1" :fileSize="20" :otherList="otherListAttachment" :bizId="dialogForm.id + 'attachment'"></file-upload>
                    </el-form-item>
                </el-col> -->
                <el-col :span="12">
                    <el-form-item label="合格照片(OK)" prop="failureOk">
                        <file-upload @change="fileChange($event,'failureOk')" :disabled="dialogForm.status > 2" :limit="1" :fileSize="20" :otherList="otherListFailureOk" :bizId="dialogForm.id" bizType="UPLOAD_FailureOk"></file-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="不合格照片(NO)" prop="failureNo">
                        <file-upload @change="fileChange($event,'failureNo')" :disabled="dialogForm.status > 2" :limit="1" :fileSize="20" :otherList="otherListFailureNo" :bizId="dialogForm.id" bizType="UPLOAD_FailureNo"></file-upload>
                    </el-form-item>
                </el-col>
                <!--        <el-col :span="8" v-if="dialogForm.status == '4'">-->
                <!--          <el-form-item label="整改结果"   >-->
                <!--            <file-upload  @change="fileChange($event,'receiveFile')" :disabled="true"  :limit="1"  :otherList="otherListReceiveTime" :bizId="dialogForm.id + 'receiveFile'" ></file-upload>-->
                <!--          </el-form-item>-->
                <!--        </el-col>-->
                <el-col :span="8" v-if="dialogForm.status == '4'">
                    <el-form-item label="整改完成时间">
                        {{dialogForm.receiveTime}}
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="dialogForm.status > 2">
                    <el-form-item label="临时围堵措施">
                        <el-table border :data="tempList">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                            <el-table-column label="库存分布" align="left" prop="temInventory" minWidth="160" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{formatInventory(scope.row)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="是否影响" align="left" prop="temInfluence" minWidth="160" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    <span v-if="scope.row.temInfluence == 1">{{$t('public.yes')}}</span>
                                    <span v-if="scope.row.temInfluence == 0">{{$t('public.no')}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="可疑数量" align="left" prop="temSuspicious" min-width="100" :show-overflow-tooltip="true" />
                            <el-table-column label="不良品数量" align="left" prop="temRejects" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="处理措施" align="left" prop="temMeasure" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="责任人" align="left" prop="temRss" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="完成时间" align="left" prop="temTime" min-width="100" :show-overflow-tooltip="true" />
                        </el-table>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="dialogForm.status > 2">
                    <el-form-item label="根本原因分析">
                        <el-table border :data="funList">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                            <el-table-column label="原因类型" align="left" prop="funType" minWidth="160" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{formatFunType(scope.row)}}
                                </template>
                            </el-table-column>
                            <el-table-column label="流程原因" align="left" prop="funProcess" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="为预防原因" align="left" prop="funPrevention" min-width="100" :show-overflow-tooltip="true" />
                            <el-table-column label="发生原因" align="left" prop="funHappen" minWidth="160" show-overflow-tooltip />
                        </el-table>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="dialogForm.status > 2">
                    <el-form-item label="永久纠正措施">
                        <el-table border :data="correctList">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                            <el-table-column label="措施详述" align="left" prop="correctDetailed" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="责任人" align="left" prop="correctRss" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="完成时间" align="left" prop="correctTime" min-width="100" :show-overflow-tooltip="true" />
                            <el-table-column label="措施验证" align="left" prop="correctVerification" minWidth="160" show-overflow-tooltip />
                        </el-table>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="dialogForm.status > 2">
                    <el-form-item label="短期措施">
                        <el-table border :data="shortList">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column :label="$t('public.serialNum')" type="index" width="55" align="center" />
                            <el-table-column label="措施详述" align="left" prop="shortDetailed" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="责任人" align="left" prop="shortRss" minWidth="160" show-overflow-tooltip />
                            <el-table-column label="完成时间" align="left" prop="shortTime" min-width="100" :show-overflow-tooltip="true" />
                            <el-table-column label="措施验证" align="left" prop="shortVerification" minWidth="160" show-overflow-tooltip />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible',false)" :loading="loading" icon="el-icon-document" size="small">{{$t('public.close')}}</el-button>
            <el-button v-if="dialogForm.status < 3" @click="submitForm(1)" type="primary" :loading="loading" icon="el-icon-document-checked" size="small">{{$t('public.saveStorage')}}</el-button>
            <el-button v-if="dialogForm.status < 3" style="background:#20B09F" type="primary" @click="submitForm()" :loading="loading" icon="el-icon-document-checked" size="small">{{$t('public.submit')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import EnjoySelectUser from '@/components/EnjoySelectUser'
import {
  getRectificationDetail,
  getRefInfo,
  pushRectification,
  rectificationCorrect,
  rectificationFun,
  rectificationShort,
  rectificationTem,
  saveRectification,
} from '@/api/inventoryManagement/ncrReview'
import {geFileByBiz} from '@/api/file/file'

export default {
    name: 'dialogSQE',
    dicts: [
        'NYIQC_RECTIFICATION_ACCIDENTTYPE',
        'NYIQC_RECTIFICATION_ORGCODE',
        'NYIQC_TEM_TEMINVENTORY',
        'NYIQC_FUN_FUNTYPE',
    ],
    components: { EnjoySelectUser },
    props: {
        value: [String],
        data: [Object],
        // executeId:{
        //   type: String
        // },
        visible: {
            type: Boolean,
            default: false,
        },
        // type:[String,Number] //1:新增  2：编辑 3：查看
    },
    watch: {
        visible: {
            handler(val) {
                if (val) {
                    this.getDetail()
                    this.getList()
                }
            },
            immediate: true,
        },
    },
    computed: {
        ...mapGetters(['userId', 'name']),
        isShow: {
            get() {
                return this.visible
            },
            set() {},
        },
        headerTitle() {
            return 'MQE填报界面'
        },
    },
    data() {
        return {
            // types: [
            //     { label: 'PR', value: '1' },
            //     { label: '8D', value: '2' },
            //     // {label:'专项',value:'3'},
            // ],
            model: '',
            tempList: [],
            funList: [],
            correctList: [],
            shortList: [],
            loading: false,
            fullscreen: false,
            deviceOptions: undefined,
            factoryOptions: undefined,
            dialogForm: { row: {}, detail: {} },
            otherListAttachment: [],
            otherListFailureOk: [],
            otherListFailureNo: [],
            otherListReceiveTime: [],
            // 表单校验
            rules: {
                accidentType: [
                    {
                        required: true,
                        message: '事故类型不能为空',
                        trigger: 'change',
                    },
                ],
                orgCode: [
                    {
                        required: true,
                        message: '业务实体不能为空',
                        trigger: 'change',
                    },
                ],
                reportType: [
                    {
                        required: true,
                        message: '报告类型不能为空',
                        trigger: 'change',
                    },
                ],
                problemTitle: [
                    {
                        required: true,
                        message: '报告标题不能为空',
                        trigger: 'change',
                    },
                ],
                icaDemandDate: [
                    {
                        required: true,
                        message: '此时间不能为空',
                        trigger: 'change',
                    },
                ],
                pcaDemandDate: [
                    {
                        required: true,
                        message: '此时间不能为空',
                        trigger: 'change',
                    },
                ],
                problemCloseDate: [
                    {
                        required: true,
                        message: '此时间不能为空',
                        trigger: 'change',
                    },
                ],
                defectWhat: [
                    {
                        required: true,
                        message: 'what不能为空',
                        trigger: 'change',
                    },
                ],
                defectWhy: [
                    {
                        required: true,
                        message: 'why不能为空',
                        trigger: 'change',
                    },
                ],
                defectWhen: [
                    {
                        required: true,
                        message: 'when不能为空',
                        trigger: 'change',
                    },
                ],
                defectWho: [
                    {
                        required: true,
                        message: 'who不能为空',
                        trigger: 'change',
                    },
                ],
                defectWhere: [
                    {
                        required: true,
                        message: 'where不能为空',
                        trigger: 'change',
                    },
                ],
                defectHow: [
                    {
                        required: true,
                        message: 'how不能为空',
                        trigger: 'change',
                    },
                ],
                // attachment: [
                //   { required: true, message: "采购方附件不能为空", trigger: "change" }
                // ],
                // failureOk: [
                //   { required: true, message: "失效写真(OK)不能为空", trigger: "change" }
                // ],
                // failureNo: [
                //   { required: true, message: "失效写真(NO)不能为空", trigger: "change" }
                // ],
            },
        }
    },

    methods: {
        formatInventory(row) {
            const current = this.dict.type.NYIQC_TEM_TEMINVENTORY.find(
                (io) => {
                    return io.value === row.temInventory
                }
            )
            return current ? current.label : ''
        },
        formatFunType(row) {
            const current = this.dict.type.NYIQC_FUN_FUNTYPE.find((io) => {
                return io.value === row.funType
            })
            return current ? current.label : ''
        },
        getList() {
            const { problemNum } = this.data.detail
            rectificationTem({ problemNum: problemNum }).then((res) => {
                this.tempList = res.rows
            })
            rectificationFun({ problemNum: problemNum }).then((res) => {
                this.funList = res.rows
            })
            rectificationCorrect({ problemNum: problemNum }).then((res) => {
                this.correctList = res.rows
            })
            rectificationShort({ problemNum: problemNum }).then((res) => {
                this.shortList = res.rows
            })
        },
        getDetail() {
            const { id, status } = this.data.detail
            let action = getRectificationDetail
            ;(status == '0' || status == '1') && (action = getRefInfo)
            action(id).then((res) => {
                this.dialogForm = {
                    ...this.data,
                    ...res.data,
                }
                if (status == '0' || status == '1') {
                    this.dialogForm.accidentType = 'PRODUCE'
                    // this.dialogForm.reportType = '1'
                    this.handleReportChange('1')
                }
                this.otherListAttachment = []
                this.otherListFailureOk = []
                this.otherListFailureNo = []
                // if (res.data?.attachment) {
                //     this.geFileByBiz(`${res.data.id}attachment`).then(
                //         (data) => {
                //             this.otherListAttachment = [data[0]]
                //         }
                //     )
                // }
                this.geFileByBiz(`${res.data.id}`).then((data) => {
                    // this.otherListFailureOk = [data[0]]
                    data.forEach((io) => {
                        if (io.bizType == 'UPLOAD_FailureOk') {
                            this.otherListFailureOk.push(io)
                        }
                        if (io.bizType == 'UPLOAD_FailureNo') {
                            this.otherListFailureNo.push(io)
                        }
                    })
                })
                // if (res.data?.failureNo) {
                //     this.geFileByBiz(`${res.data.id}`).then((data) => {
                //         this.otherListFailureNo = [data[0]]
                //     })
                // }
                if (res.data?.receiveTime) {
                    this.geFileByBiz(`${res.data.id}receiveTime`).then(
                        (data) => {
                            this.otherListReceiveTime = [data[0]]
                        }
                    )
                }
            })
        },
        handleReportChange(e) {
            if (e) {
                if (e == '1') {
                    this.dialogForm.level = '1'
                }
                if (e == '2') {
                    this.dialogForm.level = '2'
                }
                // getRefTimeByType(e).then((res) => {
                //     const { icaDemandDate, pcaDemandDate, problemCloseDate } =
                //         res.data
                //     if (icaDemandDate) {
                //         this.dialogForm.icaDemandDate = icaDemandDate
                //     }
                //     if (pcaDemandDate) {
                //         this.dialogForm.pcaDemandDate = pcaDemandDate
                //     }
                //     if (problemCloseDate) {
                //         this.dialogForm.problemCloseDate = problemCloseDate
                //     }
                // })
            }
        },
        handleLevelChange(e) {
            if (e == '1') {
                this.dialogForm.reportType = '1'
            }
            if (e == '2' || e == '3') {
                this.dialogForm.reportType = '2'
            }
        },
        fileChange(event, tag) {
            this.dialogForm[tag] = event[0].id || event[0].bizId
        },
        geFileByBiz(id) {
            return new Promise((resolve, reject) => {
                geFileByBiz({ bizId: id }).then((res) => {
                    resolve(res.data)
                })
            })
        },
        /** 发起提交 */
        submitForm: function (tag) {
            this.$refs.detailForm.validate((valid) => {
                if (valid) {
                    // pushRectification saveRectification
                    let action = pushRectification
                    if (tag == '1') {
                        action = saveRectification
                    }
                    let data = { ...this.dialogForm }
                    delete data.row
                    delete data.detail
                    delete data.stemVoList
                    this.loading = true
                    action(data).then(
                        (res) => {
                            this.loading = false
                            if (res.code == 200) {
                                this.$modal.msgSuccess('操作成功!')
                                this.$emit('update:visible', false)
                                // const executeId = this.executeId()
                                // let result = this.data.find(i=>i.executeId==executeId)
                                // result.remark = this.model
                            } else {
                                this.$modal.msgError(res.msg)
                            }
                        },
                        () => {
                            this.loading = false
                            this.$modal.msgError('操作失败！')
                        }
                    )
                }
            })
        },
        handleClose(done) {
            this.model = ''
            this.$emit('update:visible', false)
        },
    },
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__title {
    border-left: none;
}
::v-deep .el-dialog__title::before {
    display: inline-block;
    width: 4px;
    height: 15px;
    vertical-align: middle;
    margin-right: 10px;
    background: #0b7be3;
    border-radius: 2px;
    content: '';
}
.base-info {
    background-color: #f3f3f3;
    margin-bottom: 15px;
}
.dialog-sqe ::v-deep .el-form-item--small.el-form-item {
    margin-top: 10px;
    margin-bottom: 10px;
}
.base-info ::v-deep .el-form-item {
    display: inline-flex;
    width: 100%;
    .el-form-item__content {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
}
::v-deep .el-dialog__body {
    height: 80vh;
    overflow-y: auto;
}
</style>
